window.onload = function () {
    let allData = [
        {
            type: 'all',
            title: '01',
            src: './img/all/01.jpg'
        },
        {
            type: 'all',
            title: '02',
            src: './img/all/02.jpg'
        },
        {
            type: 'all',
            title: '03',
            src: './img/all/03.jpg'
        },
        {
            type: 'all',
            title: '04',
            src: './img/all/04.jpg'
        },
        {
            type: 'all',
            title: '05',
            src: './img/all/05.jpg'
        }
    ]
    let man = [
        {
            type: 'man',
            title: '01',
            src: './img/man/04.jpg'
        },
        {
            type: 'man',
            title: '02',
            src: './img/man/05.jpg'
        }
    ]
    let woman = [
        {
            type: 'woman',
            title: '01',
            src: './img/girl/01.jpg'
        },
        {
            type: 'woman',
            title: '02',
            src: './img/girl/02.jpg'
        },
        {
            type: 'woman',
            title: 'woman',
            src: './img/girl/03.jpg'
        },
    ]
    let imgs = document.querySelector('.imgs')
    let all = this.document.querySelector('#all')
    let womans = this.document.querySelector('#woman')
    let mans = this.document.querySelector('#man')
    let lis = this.document.querySelectorAll('li')
    let centerCont = document.querySelector('.datail')
    let right = document.querySelector('.right')
    let left = document.querySelector('.left')
    let centerImg = document.querySelector('.centers')
    let out = document.querySelector('.out')
    let annimate = document.querySelector('.annimate')
    out.addEventListener('click', () => { 
        centerCont.classList.remove('show')
    })
    let flag = 0
    // this.console.log('12',centerCont)
    // let img = document.querySelectorAll('img')
    // img.forEach(item => { 
    //     item.addEventListener('click', () => { 
    //         this.alert('hello')
    //     })
    // })
    lis.forEach(item => { 
        item.addEventListener('click', () => { 
            lis.forEach(item => { 
                item.classList.remove('active')
            })
            if (item.className.split(' ').includes('active')) {
                return
            } else { 
                item.classList.add('active')

            }
        })
    })
    loadImg(allData)
    mans.addEventListener('click', () => {
        loadImg(man)
        flag = 1
        // var rest = document.querySelectorAll('.rest')
    })
    all.addEventListener('click', () => { 
        loadImg(allData)
        flag = 0
        // var rest = document.querySelectorAll('.rest')
    })
    womans.addEventListener('click', () => { 
        loadImg(woman)
        flag = 2
        // var rest = document.querySelectorAll('.rest')
    })
    // this.console.log(imgs)
    // rest.forEach((item,key) => { 
    //     item.addEventListener('click', () => { 
    //         centerCont.classList.add('show')
    //         this.console.log(flag)
    //         this.console.log('888',key)
    //     })
    // })

    function loadImg(type) { 
        imgs.innerHTML = ''
        type.forEach((item,key) => { 
            let divs = document.createElement('div')
            let img = document.createElement('img')
            let bg = document.createElement('div')
            img.src = item.src
            divs.classList.add('rest')
            divs.addEventListener('click', () => { 
                centerCont.classList.add('show')
                centerImg.src = item.src
                left.addEventListener('click', () => { 
                    annimate.classList.add('do')
                    setTimeout(() => { 
                        annimate.classList.remove('do')
                    },1000)
                    // annimate.classList.remove('do')
                    console.log(key)
                    if (flag === 0) {
                        if (key === 0) {
                            key = allData.length-1
                            centerImg.src = allData[key].src
                        } else {
                            centerImg.src = allData[--key].src
                        }
                    } else if (flag === 1) {
                        if (key === 0) {
                            key = allData.length-1
                            centerImg.src = man[key].src
                        } else {
                            centerImg.src = man[--key].src
                        }
                    } else if (flag === 2) { 
                        if (key === 0) {
                            key = allData.length-1
                            centerImg.src = woman[key].src
                        } else {
                            centerImg.src = woman[--key].src
                        }
                    }
                })
                right.addEventListener('click', () => { 
                    annimate.classList.add('do')
                    setTimeout(() => { 
                        annimate.classList.remove('do')
                    },1000)
                    // annimate.classList.remove('do')
                    if (flag === 0) {
                        if (key === allData.length-1) {
                            key = 0
                            centerImg.src = allData[key].src
                        } else {
                            centerImg.src = allData[++key].src
                        }
                    } else if (flag === 1) {
                        if (key === man.length-1) {
                            key = 0
                            centerImg.src = man[key].src
                        } else {
                            centerImg.src = man[++key].src
                        }
                    } else if (flag === 2) { 
                        if (key === woman.length-1) {
                            key = 0
                            centerImg.src = woman[key].src
                        } else {
                            centerImg.src = woman[++key].src
                        }
                    }
                })
            })
            img.classList.add('PIC')
            bg.innerHTML = item.type
            bg.classList.add('bg')
            this.console.log(img)
            divs.appendChild(img)
            divs.appendChild(bg)
            imgs.appendChild(divs)
        })
    } 
    // function watch() { 
    //     console.log(data)
    //     centerCont.classList.add('show')
    //     // console.log('hhhh',rest)
    // }
}